<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow>
      <!-- 头部功能 -->
      <template #header>
        <div>
          <el-input
            clearable
            placeholder="请输入查询关键字"
            v-model="query"
            class="input-with-select"
            style="width: 400px"
            @clear="reloadUserlistQuery"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              style="width: 50px"
              @click="reloadUserlistQuery"
            ></el-button>
          </el-input>
        </div>
      </template>

      <!-- 正文内容 -->
      <el-table
        border
        :data="orders"
        v-loading="loading"
        @expand-change="getOrderDetailById"
      >
        <el-table-column type="expand" label="明细" width="50">
          <!-- slot-scope="props" -->
          <template #default="{ row }">
            <div class="unfoldContent">
              <el-descriptions border :direction="'vertical'">
                <el-descriptions-item label="订单编号">{{
                  row.order_number
                }}</el-descriptions-item>
                <el-descriptions-item label="发票信息">
                  <el-tag
                    v-if="row.order_fapiao_title == '个人'"
                    type="success"
                    size="small"
                    >{{ row.order_fapiao_title }}</el-tag
                  >
                  <el-tag v-else size="small">{{
                    row.order_fapiao_title
                  }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="联系地址">{{
                  row.consignee_addr
                }}</el-descriptions-item>
              </el-descriptions>
              <!-- 使用表格嵌套实现详情展示 -->
              <el-table :data="goodsDetails" v-loading="loading" border>
                <el-table-column label="封面" prop="pics" width="60px">
                  <template #default="{ row }">
                    <el-popover placement="bottom-start" trigger="hover">
                      <template #default>
                        <el-image
                          class="good_img_big"
                          fit="cover"
                          v-for="pic in row.pics"
                          :key="pic.pics_id"
                          :src="pic.pics_sma_url"
                        ></el-image>
                      </template>
                      <template #reference>
                        <el-image
                          class="good_img"
                          :src="row.pics[0].pics_sma_url"
                          fit="cover"
                        ></el-image>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goods_name">
                </el-table-column>
                <el-table-column
                  label="商品重量"
                  prop="goods_weight"
                  width="120px"
                >
                </el-table-column>
                <el-table-column
                  label="商品单价(元)"
                  prop="goods_price"
                  width="120px"
                >
                </el-table-column>
                <el-table-column
                  label="购买数量"
                  prop="goods_number"
                  width="120px"
                >
                </el-table-column>
                <el-table-column
                  label="商品总价"
                  prop="goods_total_price"
                  width="120px"
                >
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格(元)">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" #default="{ row }">
          <el-tag
            effect="dark"
            type="danger"
            v-show="row.pay_status == 0"
            size="mini"
          >
            未付款
          </el-tag>
          <el-tag
            effect="dark"
            type="success"
            v-show="row.pay_status == 1"
            size="mini"
          >
            已付款
          </el-tag>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间"> </el-table-column>
        <el-table-column label="操作" width="200" #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            content="用户编辑"
            placement="bottom"
          >
            <el-button
              class="updateUser"
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="updateAddressData(row)"
            ></el-button>
          </el-tooltip>
          <el-dialog title="修改收获地址" :visible.sync="updateFormVisible">
            <el-form
              :model="address"
              ref="updateAddressForm"
              :rules="$rules.order"
            >
              <el-form-item
                prop="consignee_addr"
                label="省市区/县"
                :label-width="formLabelWidth"
              >
                <el-cascader
                  :options="options"
                  clearable
                  v-model="address.consignee_addr"
                ></el-cascader>
                <!-- <el-select
                  v-model="address.consignee_addr"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item
                prop="consignee_addr2"
                label="详细地址"
                :label-width="formLabelWidth"
              >
                <el-input v-model="address.consignee_addr2"> </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="updateFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateOrderAddressById()"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-tooltip
            class="item"
            effect="dark"
            content="物流进度"
            placement="bottom"
          >
            <el-button
              type="warning"
              icon="el-icon-location"
              size="mini"
              @click="getLogisticsData(row)"
            ></el-button>
          </el-tooltip>
          <el-dialog
            title="物流进度"
            :visible.sync="addressFormVisible"
            width="50%"
          >
            <el-timeline reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in logistics"
                :key="index"
                :timestamp="activity.ftime"
              >
                {{ activity.context }}
              </el-timeline-item>
            </el-timeline>
          </el-dialog>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="reloadUserlistSize"
        @current-change="reloadUserlistPage"
        :current-page="pagenum"
      >
      </el-pagination>
      <!-- @size-change="handleSizeChange" pageSize改变时触发(每一页)
        @current-change="handleCurrentChange" currentPage 改变时触发(当前页)
        :current-page="currentPage" 当前页数-->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orders: [],
      total: 16, //总页数
      pagesize: 10, //页面数据调
      pagenum: 1, //当前页码
      query: "", //加载页面条件限制参数
      loading: false,
      visible: false,
      goodsDetails: [],
      goodsDetails2: [],
      logistics:[],
      address: {
        consignee_addr: "",
        consignee_addr2: "",
      },
      options: [
        {
          value: "江苏省",
          label: "江苏省",
          children: [
            {
              value: "南京市",
              label: "南京市",
              children: [
                {
                  value: "秦淮区",
                  label: "秦淮区",
                },
                {
                  value: "玄武区",
                  label: "玄武区",
                },
              ],
            },
          ],
        },
      ],
      addFormVisible: false,
      updateFormVisible: false,
      addressFormVisible: false,
      formLabelWidth: "100px",
    };
  },
  methods: {
    //初始化数据
    async initOrderList() {
      try {
        this.loading = true;
        let orders = await this.$api.getOrdersList({
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        });
        if (orders == "error") return;
        this.orders = orders.goods;
        this.total = orders.total;
        this.pagenum = orders.pagenum * 1; // 这行代码可以定义也可以不定义，主要为保证和后端服务器结果同步
        console.log("orders", orders, this.orders);
      } catch (error) {
        console.log("UserView-loadUserListPage-error:", error);
      } finally {
        this.loading = false;
      }
    },
    //更新查询user的参数
    reloadUserlistQuery() {
      this.pagenum = 1;
      this.initOrderList();
    },
    // 查询订单详情数据
    async getOrderDetailById(row) {
      // console.log("row", row);
      let data = await this.$api.getOrderDetailById(row.order_id);
      // console.log("getOrderDetailById", data);
      this.goodsDetails = data.goods;
      // console.log("this.goodsDetails", this.goodsDetails);
      this.getGoodsDetailByattributes();
    },
    //同步商品属性
    async getGoodsDetailByattributes() {
      this.goodsDetails.forEach(async (v) => {
        let data = await this.$api.getGoodsDetailByattributes(v.id);
        // console.log("getGoodsDetailByattributes", v, data);
        v.pics = data.pics;
        v.goods_name = data.goods_name;
        v.goods_weight = data.goods_weight;
        this.goodsDetails2.push(v);
      });
      this.goodsDetails = this.goodsDetails2;
    },
    //拿到当前点击的按钮的订单id
    updateAddressData(data) {
      this.updateFormVisible = true;
      // console.log(2222, data);
      this.address = {
        id: data.order_id,
        consignee_addr: "",
      };
    },
    //修改收货地址
    async updateOrderAddressById() {
      try {
        let consignee_addr = this.address.consignee_addr
          .concat(this.address.consignee_addr2)
          .join(",");
        let params = {
          consignee_addr,
        };
        // console.log(123, params);
        await this.$refs.updateAddressForm.validate();
        // console.log(11222, this.address);
        let data = await this.$api.updateOrderAddressById(
          this.address.id,
          params
        );
        // console.log(12345, data);
        if (data == "error") return;
        this.$message.success("修改成功");
        this.updateFormVisible = false;
        this.initOrderList();
      } catch (error) {
        console.log("UserView-modifyUserById-error:", error);
      }
    },

    //通过id查看物流信息
    async getLogisticsData(data) {
      try {
        // console.log(111, data);
        this.addressFormVisible = true;
        let result = await this.$api.getLogisticsData(data.order_id);
        // console.log(2222, result);
        this.logistics=result
      } catch (error) {
        console.log("erroe-getLogisticsData", error);
      }

      // this.address = {
      //   id: data.order_id,
      //   consignee_addr: "",
      // };
    },

    //pageSize改变时触发(每一页)
    reloadUserlistPage(newPageNum) {
      // console.log(this.pagenum, newPageNum);
      this.pagenum = newPageNum;
      this.initOrderList();
    },
    //currentPage 改变时触发(当前页)
    reloadUserlistSize(newPagePage) {
      // console.log(this.pagenum,newPagePage);
      this.pagesize = newPagePage;
      this.initOrderList();
    },
  },
  created() {
    //初始化数据请求
    this.initOrderList();
  },
};
</script>
<style lang="less" scoped>
.el-button,
.el-tooltip {
  margin: 0;
}
.addUser {
  margin-left: 22px;
}
.el-button,
.updateUser {
  margin-right: 10px;
}
.unfoldContent {
  padding: 0 50px;
}
.el-descriptions {
  margin-bottom: 10px;
}
.el-cascader {
  width: 100%;
}
</style>